<template>
  <div class="check">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide flip-container">
          <div class="flipper">
            <div class="front curPhoto">AA</div>
            <div class="back qrcodeDiv"> AA+</div>
          </div>
        </div>
        <div class="swiper-slide flip-container">
          <div class="flipper">
            <div class="front curPhoto"> BB</div>
            <div class="back qrcodeDiv">BB+</div>
          </div>
        </div>
        <div class="swiper-slide flip-container">
          <div class="flipper">
            <div class="front curPhoto">CC</div>
            <div class="back qrcodeDiv">CC+</div>
          </div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <div class="photoBtns font42" v-if="isfront">
      <div class="close">关闭</div>
      <div class="check">查看商品</div>
      <div class="download" @click="goQRcode()">下载图片</div>
    </div>
    <div class="photoBtns font42" v-else>
      <div class="backPhoto" @click="backPhoto()">返回照片</div>
      <div class="goonMP">继续试妆</div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      closeCover: false
    },
    data(){
      return {
        isFirstDelete: true,
        isfront: true
      }
    },
    beforeCreate(){
    },
    created(){

    },
    beforeMount(){
    },
    mounted(){
      this.init();
    },
    beforeDestroy(){
    },
    destroyed(){
    },
    methods: {
      init: function () {
        var swiper = new Swiper('.swiper-container', {
          pagination: '.swiper-pagination',
          paginationClickable: true
        });
        $('.swiper-container').click(function (e) {
          e.stopPropagation();
        })
      },
      goQRcode: function () {
        $('.flipper').css('transform', "rotateY(180deg)")
        this.isfront = false;
      },
      backPhoto: function () {

        $('.flipper').css('transform', "");
        this.isfront = true;
      }
    },
    components: {}
  }
</script>
<style scoped>
  .flip-container {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d; /*重要*/
  }

  .swiper-container {
    width: 10rem;
    height: 11.82rem;
    position: absolute;
    bottom: 3.42rem;
    left: 9rem;
  }

  .flipper {
    transition: 0.6s;
    transform-style: preserve-3d; /*重要*/
  }

  /* 触发翻转 */

  .front, .back {
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden; /*重要*/
    width: 10rem;
    height: 11.82rem;
  }

  .front {
    transform: rotateY(0deg);
    z-index: 2;
    background-color: white;
    color:black
  }

  .back {
    transform: rotateY(-180deg);
    background-color: red;

  }

  .photoBtns {
    position: absolute;
    left: 19.66rem;
    height: 4.86rem;
    width: 3.5rem;
    bottom: 10.38rem;
  }

  .photoBtns div {
    border: 0.05rem solid #ffffff;
    width: 3.4rem;
    height: 1.2rem;
    margin-bottom: 0.48rem;
    text-align: center;
    line-height: 1.2rem;
    cursor: pointer;
  }

  .swiper-pagination-bullet {
    background-color: #fff;
    opacity: 0.5;
    height: 0.24rem;
    width: 0.24rem;
    margin: 0.15rem !important;
  }

  .swiper-pagination-bullet-active {
    background-color: #fff;
    opacity: 1;
  }

  .swiper-pagination {
    position: absolute;
    z-index: 30;
    bottom: -2rem !important;
  }
</style>
